<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#outer {
	width: 200px;
	height: 200px;
	background-color: blue;
	position:relative;
}
</style>
</head>
<body>
	<div id="outer" style="left: 0; top: 0;"></div>
	<script type="text/javascript">
var outer=document.getElementById('outer');
function move(speed,target,name,callback){
	var timer=setInterval(()=>{
		var oldValue=parseInt(outer.style[name]);
		var newValue=oldValue+speed;
		if((newValue>=target&&speed>0) || (newValue<=target&&speed<0)){
			newValue=target;
			clearInterval(timer);
			callback();
		}
		outer.style[name]=newValue+'px';
	},10)
}
function start(){
	move(10,800,'left',function(){
		move(10,500,'top',function(){
			move(-10,0,'left',function(){
				move(-10,0,'top',function(){
					start();
				})
			})
		})
	})
	
}
start();
</script>
</body>
</html>